import React from 'react';
import {
    Button,
    Text,
    View,
    Image,
    StyleSheet,
    Dimensions,
    StatusBar,
    ActivityIndicator,
    FlatList,
    ScrollView,
    RefreshControl,
    Animated,
    TouchableOpacity,
    SectionList,
    DeviceEventEmitter,
    TextInput,
    Modal
} from 'react-native';
import { Card } from 'react-native-shadow-cards';
import QRCode from 'react-native-qrcode-svg';
import Styles from './Styles';
import app from '../../../app.json';
import Ugame from '../../../Ugame';
import Httpc from "../../utils/Httpc";
import REQUEST from "../../../REQUEST";
import Utils from "../../utils/Utils";

const { width, height } = Dimensions.get('window');
// 初始化总数据

export default class ChongZhi extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            toastModelVisible: false,
            message: '',
            oldtruename: null,
            truename: null,
            idcard: null,
            isSend: false,
            type: 0,
            tip: [],
            amount: '',

        };
        this.timeOut = null;

    }
    static navigationOptions = {
        title: '充值',
        //header: null,  //隐藏顶部导航栏
        //tabBarVisible: false, // 隐藏底部导航栏
        headerStyle: {
            backgroundColor: '#d0162e',
            paddingTop: 18,
        },
        headerTintColor: '#fff',
        headerTitleStyle: {

        },
    }
    componentWillMount() {
        //组件将要被加载到视图之前调用
    }
    componentWillUnmount() {
        clearTimeout(this.timeOut);
    }
    componentDidMount() {
        // 在调用了render方法，组件加载成功并被成功渲染出来之后，所要执行的后续操作，一般都会在这个函数中进行，比如经常要面对的网络请求等加载数据操作
        // *** 因为UI已经成功渲染，而且这里面是异步的，所以放在这个函数进行数据的请求等复杂的操作，不会出现UI错误**
        let navigation = this.props.navigation;
        let gold = navigation.getParam("gold");
        let tip = [
            (Utils.getRandomNumber(5000, 5099) / 100).toFixed(2),
            (Utils.getRandomNumber(10000, 10099) / 100).toFixed(2),
            (Utils.getRandomNumber(30000, 30099) / 100).toFixed(2),
            (Utils.getRandomNumber(50000, 50099) / 100).toFixed(2)
        ];
        this.setState({
            tip: tip,
            gold: gold
        });
    }
    do_setType(type) {
        this.setState({
            type: type
        });
    }
    do_toast = (str, time, func) => {
        this.setState({
            message: str,
            toastModelVisible: true
        });
        this.timeOut = setTimeout(() => {
            this.setState({
                message: '',
                toastModelVisible: false
            });
            func();
        }, time);
    }
    toast = () => {
        return (
            <Modal
                animationType="fade"
                transparent={true}
                visible={this.state.toastModelVisible}
                onRequestClose={() => {
                    this.setState({
                        toastModelVisible: false
                    });
                }}
            >
                <View style={{ flexDirection: 'row', justifyContent: 'center', position: 'absolute', bottom: 100, width: width }}>
                    <Text style={{ backgroundColor: 'rgba(0,0,0,0.7)', color: '#ffffff', borderRadius: 10, height: 40, lineHeight: 40, paddingLeft: 20, paddingRight: 20 }}>{this.state.message}</Text>
                </View>
            </Modal>
        );
    }
    _createNewsItem = ({ item }) => {
        let css = { backgroundColor: '#f7f7f7', borderRadius: 5, height: 40, width: (width - 24) / 2, lineHeight: 40, textAlign: 'center', color: '#333333', marginTop: 10, marginRight: 10 };
        if (Number(this.state.amount) == item) {
            css = { backgroundColor: '#d0162e', borderRadius: 5, height: 40, width: (width - 24) / 2, lineHeight: 40, textAlign: 'center', color: '#ffffff', marginTop: 10, marginRight: 10 };
        }
        return (
            <TouchableOpacity onPress={() => { this.setState({ amount: item }) }}>
                <Text style={css}>{item}</Text>
            </TouchableOpacity>
        );
    }
    do_pay() {
        let { type, amount } = this.state;
        switch (type) {
            case 1:
                if (amount == '' || Number(amount) == 0 || isNaN(Number(amount))) {
                    this.do_toast('金额格式错误', 500, () => { });
                    return;
                }
                let data = {
                    token: Ugame.info.Token,
                    totalAmount: Number(amount)
                }
                Httpc.getToHtml(REQUEST.Alipay, data, (res) => {
                    this.props.navigation.navigate('AliPay', {
                        form: res
                    });
                })
                break;
            case 2:
                this.props.navigation.navigate('WxPay');
                break;
            case 3:
                this.props.navigation.navigate('AliSPay');
                break;
            default:
                this.do_toast('请选择支付方式', 500, () => { });
                break;
        }
    }
    changeAmount(amount) {
        if (amount == '' || Number(amount) == 0 || isNaN(Number(amount))) {
            amount = '';
        } else {
            amount = Number(amount);
            amount = Math.round(amount * 100) / 100;
        }
        this.setState({
            amount: '' + amount
        });

    }
    render() {
        let { gold, type, tip } = this.state;
        return (
            <View style={Styles.container}>
                <StatusBar translucent={true} backgroundColor="transparent" />
                <View style={{ backgroundColor: '#ffffff', flexDirection: 'row', justifyContent: 'flex-start', alignItems: 'center', height: 40 }}>
                    <Text style={{ color: '#969696', paddingLeft: 12 }}>账户余额：{gold}元</Text>
                </View>
                <View style={{ backgroundColor: '#ffffff', marginTop: 10, padding: 12 }}>
                    <Text style={{ color: '#333333', marginBottom: 10 }}>选择重置金额</Text>
                    <View style={{ flexDirection: 'row', justifyContent: 'flex-start', alignItems: 'center', backgroundColor: '#f7f7f7', height: 40, borderRadius: 5 }}>
                        <Text style={{ fontSize: 20, color: '#333333', paddingLeft: 12 }}>￥</Text>
                        <TextInput
                            style={{ height: 25, padding: 0, lineHeight: 25, textAlign: 'left', width: width - 44 }}
                            placeholder="请输入充值金额"
                            placeholderTextColor="#CCC"
                            onChangeText={(amount) => this.changeAmount(amount)}
                            value={this.state.amount}
                            keyboardType='numeric'
                        // onEndEditing={this.dissmissKeyboard.bind(this)}
                        />
                    </View>
                    <View>
                        <FlatList
                            data={tip}
                            horizontal={false}
                            numColumns={3}
                            extraData={this.state}
                            keyExtractor={(item, index) => index.toString()}
                            renderItem={this._createNewsItem}
                        />
                    </View>
                </View>
                <View style={{ backgroundColor: '#ffffff', marginTop: 10 }}>
                    <Text style={{ height: 40, color: '#333', paddingLeft: 12, lineHeight: 40, borderBottomColor: '#f7f7f7', borderBottomWidth: 1 }}>选择支付方式</Text>
                    <TouchableOpacity onPress={() => this.do_setType(1)}>
                        <View style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', backgroundColor: '#ffffff', borderBottomColor: '#f7f7f7', borderBottomWidth: 1, paddingRight: 12, height: 50 }}>
                            <View style={{ flexDirection: 'row', justifyContent: 'flex-start', alignItems: 'center', paddingLeft: 12 }}  >
                                <Image resizeMode="cover" style={{ width: 30, height: 30, borderRadius: 30 }} source={require('../../image/js_img_zfb.png')} />
                                <Text style={{ paddingLeft: 12 }}>支付宝充值</Text>
                            </View>
                            {type == 1 ?
                                <Image resizeMode="cover" source={require('../../image/js_img_list_icon_checked.png')} /> :
                                <Image resizeMode="cover" source={require('../../image/js_img_list_icon_unchecked.png')} />
                            }
                        </View>
                    </TouchableOpacity>
                    <TouchableOpacity onPress={() => this.do_setType(3)}>
                        <View style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', backgroundColor: '#ffffff', borderBottomColor: '#f7f7f7', borderBottomWidth: 1, paddingRight: 12, height: 50 }}>
                            <View style={{ flexDirection: 'row', justifyContent: 'flex-start', alignItems: 'center', paddingLeft: 12 }}  >
                                <Image resizeMode="cover" style={{ width: 30, height: 30, borderRadius: 30 }} source={require('../../image/js_img_zfb.png')} />
                                <Text style={{ paddingLeft: 12 }}>支付宝扫码</Text>
                            </View>
                            {type == 3 ?
                                <Image resizeMode="cover" source={require('../../image/js_img_list_icon_checked.png')} /> :
                                <Image resizeMode="cover" source={require('../../image/js_img_list_icon_unchecked.png')} />
                            }
                        </View>
                    </TouchableOpacity>
                    <TouchableOpacity onPress={() => this.do_setType(2)}>
                        <View style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', backgroundColor: '#ffffff', borderBottomColor: '#f7f7f7', borderBottomWidth: 1, paddingRight: 12, height: 50 }}>
                            <View style={{ flexDirection: 'row', justifyContent: 'flex-start', alignItems: 'center', paddingLeft: 12 }}  >
                                <Image resizeMode="cover" style={{ width: 30, height: 30, borderRadius: 30 }} source={require('../../image/js_img_wxf.png')} />
                                <Text style={{ paddingLeft: 12 }}>微信充值</Text>
                            </View>
                            {type == 2 ?
                                <Image resizeMode="cover" source={require('../../image/js_img_list_icon_checked.png')} /> :
                                <Image resizeMode="cover" source={require('../../image/js_img_list_icon_unchecked.png')} />
                            }
                        </View>
                    </TouchableOpacity>
                </View>
                <TouchableOpacity onPress={() => this.do_pay()}>
                    <View style={Styles.login_btn}>
                        <Text style={{ color: '#ffffff', fontSize: 16 }}>确认支付</Text>
                    </View>
                </TouchableOpacity>
                <View style={{ marginTop: 20 }}>
                    <Text style={{ color: '#333333', paddingLeft: 12, paddingRight: 12, paddingBottom: 12 }}>温馨提示：</Text>
                    <Text style={{ color: '#969696', paddingLeft: 12, fontSize: 12, paddingBottom: 12 }}>为防止信用卡套现的行为，充值金额转为彩金不可提现 （彩金只可用于购彩，中奖金额随时可提）</Text>
                    <Text style={{ color: '#969696', paddingLeft: 12, fontSize: 12 }}>帐户不允许从事无真实交易背景的虚假交易，套现和洗钱等行为均违反国家相关的法律法规，由此产生的后果由您承担</Text>
                </View>
                {this.toast()}
            </View>
        )
    }
}

